<template>
	<view class="home_container">
		<view class="home_box">
			<view class="top_img_box">
				<image :src="registerBannerImg" mode="widthFix" class="top_img"></image>
			</view>
			<view class="bgc_img_all">
				<view class="bgc_img_box">
					<image :src="bgcImg" mode="" class="bgc_img"></image>
				</view>

				<view class="form_box">
					<view class="form_all">
						<view class="form_img_box">
							<image :src="registerImg" mode="widthFix" class="form_img"></image>
						</view>

						<view class="form_input_box">
							<!-- <view class="input_box">
								<u-input v-model="usernameValue" :border="false" :clearable="false" maxlength="11"
									placeholder="请输入用户名"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view> -->
							<view class="input_box">
								<u-input
									v-model="phoneValue"
									type="number"
									:border="false"
									:clearable="false"
									maxlength="11"
									placeholder="请输入手机号"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;"
								/>
							</view>

							<view class="input_code_box">
								<view class="">
									<u-input
										v-model="codeValue"
										type="number"
										:border="false"
										:clearable="false"
										placeholder="请输入验证码"
										placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;"
									/>
								</view>
								<view class="code_title" @click="sendCodeBtn">
									{{ send ? '获取验证码' : second + 's重新发送' }}
								</view>
							</view>

							<view class="input_box">
								<u-input
									v-model="passwordValue"
									:border="false"
									:clearable="false"
									placeholder="请输入密码"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;"
								/>
							</view>

							<!-- <view class="input_box">
								<u-input v-model="surePasswordValue" :border="false" :clearable="false"
									placeholder="请确认密码"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view> -->

							<view class="register_btn_box" @click="handlerRegister">注 册</view>
							<!-- <view class="login_btn_box" @click="handleLogin" style="margin-top: 20rpx;">
								已有账号，去登录
							</view> -->

							<view class="register_read_box">
								<view class="register_read_all">
									<view class="left_box">
										<!-- <image src="/static/icon-checked.png" mode="" class="left_img"></image> -->
										<checkbox-group @change="handleChange">
											<label>
												<checkbox value="checkStatusValue" style="transform: scale(0.7)" :checked="checkStatus" />
												点击"注册"按钮标识您同意
											</label>
											<span class="left_read_title" @click="handleCheckRead('0')">《用户注册协议》</span>
											<span class="left_read_title" @click="handleCheckRead('1')">《隐私协议》</span>
										</checkbox-group>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 用户服务协议及隐私政策 -->
			<agreement ref="refAgreement" :agreementType="agreementType"></agreement>
		</view>
	</view>
</template>

<script>
import { Debounce, Throttle } from '@/utils/common.js';
import parseQueryString from '@/utils/interceptUrl.js';
import Agreement from '@/pages/login/components/agreement.vue';
export default {
	components: {
		Agreement
	},
	data() {
		return {
			registerImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668368b7334db_1719888055.png',
			phoneValue: '',
			codeValue: '',
			passwordValue: '',
			surePasswordValue: '',
			send: true, //验证码按钮状态
			second: 0, //显示倒计时
			s: 60, //默认倒计时
			agentId: '',
			pid: '',
			ppid: '',
			registerBannerImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/xcx_static/65fe2d539fdb7_1711156563.png',
			sceneNumber: '',
			sceneObj: {},
			usernameValue: '',
			checkStatus: false,
			checkStatusValue: '',
			readList: {
				name: "点击'注册'按钮标识您同意",
				checked: false
			},
			agreementType: '',
			bgcImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66c697ca62ae9_1724291018.png'
		};
	},
	onShow() {
		uni.hideHomeButton();
	},
	onLoad(options) {
		// if (options) {
		// 	const that = this
		// 	const scene = decodeURIComponent(options.scene)
		// 	if (scene) {
		// 		that.sceneNumber = scene
		// 		that.getMiniProgramScene()
		// 	} else {
		// 		this.sceneObj = options
		// 	}
		// }
		if (options.scene) {
			const scene = decodeURIComponent(options.scene);
			this.sceneNumber = scene;
			this.getMiniProgramScene();
		} else {
			this.sceneObj = options;
			// this.sceneObj.agent_id = options.agent_id ? options.agent_id : ''
			// this.sceneObj.pid = options.pid ? options.pid : ''
			// if (options.ppid == undefined) {
			// 	this.sceneObj.ppid = ''

			// } else {
			// 	this.sceneObj.ppid = options.ppid
			// }
		}
	},
	methods: {
		handleChange(e) {
			this.checkStatusValue = e.detail.value[0];
		},

		// 查看我已阅读
		handleCheckRead(val) {
			this.agreementType = val;
			this.$refs.refAgreement.isShowUserAgreement = true;
		},

		// 去登录
		handleLogin() {
			uni.redirectTo({
				url: '/pages/login/login'
			});
		},

		// 查询微信小程序场景值接口
		getMiniProgramScene() {
			uni.request({
				url: 'https://saler.jkcae.com/app/getMiniProgramScene?id=' + this.sceneNumber,
				method: 'GET',
				success: (res) => {
					if (res.data.code == 1) {
						let sceneDetail = parseQueryString(res.data.data);
						this.sceneObj = sceneDetail;
					} else {
						uni.showToast({
							title: '查询失败',
							icon: 'none'
						});
						return;
					}
				}
			});
		},

		// 微信登录接口-code
		xcxGetUserInfo(val, phone) {
			this.$request(
				'/xcxGetUserInfo',
				{
					code: val,
					phone: phone
				},
				'GET'
			).then((res) => {
				uni.setStorageSync('userWxOpenid', res.data);
			});
		},

		// 获取验证码接口
		getCode() {
			uni.request({
				url: 'https://saler.jkcae.com/app/fxuserGetSmsCode',
				method: 'POST',
				data: {
					phone: this.phoneValue
				},
				success: (res) => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						return;
					}
				}
			});
		},

		// 注册接口
		getRegister() {
			const that = this;
			uni.request({
				url: 'https://saler.jkcae.com/app/fxuserRegisterPassword',
				method: 'POST',
				data: {
					// username: this.usernameValue,
					phone: this.phoneValue,
					password: this.passwordValue,
					code: this.codeValue,
					agent_id: this.sceneObj.agent_id ? this.sceneObj.agent_id : '',
					pid: this.sceneObj.pid ? this.sceneObj.pid : '',
					ppid: this.sceneObj.ppid === 'undefined' ? '' : this.sceneObj.ppid
				},
				success: (res) => {
					if (res.data.code == 1) {
						uni.setStorageSync('h5-token', res.data.data.token);
						uni.setStorageSync('userInfo', res.data.data.userInfo);
						uni.login({
							provider: 'weixin', //使用微信登录
							success: function (loginRes) {
								that.xcxGetUserInfo(loginRes.code, that.phoneValue);
							}
						});
						uni.showToast({
							title: '注册成功',
							icon: 'none',
							success: (res) => {
								setTimeout(() => {
									this.phoneValue = '';
									this.codeValue = '';
									this.passwordValue = '';
									this.surePasswordValue = '';
									uni.switchTab({
										url: '/pages/index/index'
									});
								}, 1200);
							}
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						return;
					}
				}
			});
		},

		//验证码按钮点击
		sendCodeBtn() {
			let that = this;
			//防连点
			if (!that.send) {
				return false;
			}
			this.send = false;
			that.time();
			if (this.phoneValue == '') {
				this.second = this.s;
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
				return;
			} else {
				that.getCode();
			}
		},

		//倒计时
		time() {
			let that = this;
			that.second = that.s;
			let interval = setInterval(() => {
				if (that.second == 1) {
					that.send = true;
					that.second = that.s;
					clearInterval(interval);
				} else {
					that.second--;
				}
			}, 1000);
		},

		// 注册
		handlerRegister: Throttle(function () {
			// if (this.usernameValue == '') {
			// 	uni.showToast({
			// 		title: '请输入用户名',
			// 		icon: 'none'
			// 	})
			// 	return
			// } else
			if (this.phoneValue == '') {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			} else if (this.codeValue == '') {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return;
			} else if (this.passwordValue == '') {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return;
			} else if (this.passwordValue.length < 6) {
				uni.showToast({
					title: '密码不可以少于6位',
					icon: 'none'
				});
				return;
			} else if (this.checkStatusValue == '') {
				uni.showToast({
					title: '请勾选相关协议',
					icon: 'none'
				});
				return;
			}
			// else if (this.surePasswordValue == '') {
			// 	uni.showToast({
			// 		title: '请确认密码',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			// else if (this.surePasswordValue.length !== 6) {
			// 	uni.showToast({
			// 		title: '确认密码不可以少于6位',
			// 		icon: 'none'
			// 	})
			// 	return
			// }

			// if (this.passwordValue != this.surePasswordValue) {
			// 	uni.showToast({
			// 		title: '两次输入的密码不一致',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			this.getRegister();
		}, 5000)
	}
};
</script>
<style>
body {
	background: #9acffc;
}
</style>
<style lang="scss" scoped>
.home_container {
	.home_box {
		.top_img_box {
			width: 100%;

			.top_img {
				width: 100%;
				height: 100%;
			}
		}

		.bgc_img_all {
			padding-bottom: 30rpx;

			.bgc_img_box {
				width: 100%;

				.bgc_img {
					width: 100%;
					height: 100%;
				}
			}

			.form_box {
				position: relative;
				display: flex;
				justify-content: center;

				.form_all {
					// width: 619rpx;
					// height: 685rpx;
					background: #ffffff;
					box-shadow: 0px 2rpx 9rpx 0px rgba(66, 158, 238, 0.72);
					border-radius: 12rpx;
					padding: 0 30rpx 30rpx;

					.form_img_box {
						position: absolute;
						top: -34rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 326rpx;
						height: 66rpx;

						.form_img {
							width: 100%;
							height: 100%;
						}
					}

					.form_input_box {
						display: flex;
						flex-direction: column;
						margin-top: 67rpx;

						.input_box {
							width: 560rpx;
							height: 68rpx;
							background: #f5f5f5;
							border: 1px solid #f5f5f5;
							border-radius: 34rpx;
							padding-left: 40rpx;
							margin-bottom: 37rpx;
						}

						.input_code_box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 560rpx;
							height: 68rpx;
							background: #f5f5f5;
							border: 1px solid #f5f5f5;
							border-radius: 34rpx;
							padding: 0 30rpx 0 40rpx;
							margin-bottom: 37rpx;

							.code_title {
								font-size: 22rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #499aff;
							}
						}

						.register_tip_box {
							display: flex;
							justify-content: flex-end;
							padding-bottom: 30rpx;

							.forget_title {
								font-size: 22rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #ccc;
							}

							.register_tip {
								font-size: 22rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #3488fe;
							}
						}

						.register_btn_box {
							width: 560rpx;
							height: 70rpx;
							background: linear-gradient(185deg, #3c91ff, #b5e5fe);
							border-radius: 35rpx;
							font-size: 34rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #ffffff;
							text-align: center;
							line-height: 70rpx;
						}

						.login_btn_box {
							width: 560rpx;
							height: 70rpx;
							background: linear-gradient(185deg, #f4271c, #fb8377);
							border-radius: 35rpx;
							font-size: 34rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #ffffff;
							text-align: center;
							line-height: 70rpx;
						}

						.register_read_box {
							width: 471rpx;
							padding-top: 30rpx;

							.register_read_all {
								display: flex;

								.left_box {
									font-size: 24rpx;

									.left_read_title {
										color: #73b5ff;
										font-size: 24rpx;
									}
								}

								.right_box {
									width: 90%;
									font-size: 21rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #499aff;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
